{% extends 'layouts/base.html' %}
{% load static %}

{% block title %}Photogrid - {% endblock title %}

{% block content %}

  <div class="page-wrapper">
    <!-- Page header -->
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <h2 class="page-title">
              Photogrid
            </h2>
          </div>
        </div>
      </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
      <div class="container-xl">
        <div class="row g-2 g-md-3">
          <div class="col-lg-6">
            <div class="row g-2 g-md-3">
              <div class="col-12">
                <a data-fslightbox="gallery" href="{% static 'static/photos/group-of-people-brainstorming-and-taking-notes-2.jpg' %}">
                  <!-- Photo -->
                  <div class="img-responsive img-responsive-3x1 rounded-3 border" style="background-image: url({% static 'static/photos/group-of-people-brainstorming-and-taking-notes-2.jpg' %})"></div>
                </a>
              </div>
              <div class="col-6">
                <a data-fslightbox="gallery" href="{% static 'static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg' %}">
                  <!-- Photo -->
                  <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg' %})"></div>
                </a>
              </div>
              <div class="col-6">
                <div class="row g-2 g-md-3">
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg' %})"></div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/young-woman-working-in-a-cafe.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/young-woman-working-in-a-cafe.jpg' %})"></div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/everything-you-need-to-work-from-your-bed.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/everything-you-need-to-work-from-your-bed.jpg' %})"></div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/young-entrepreneur-working-from-a-modern-cafe.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/young-entrepreneur-working-from-a-modern-cafe.jpg' %})"></div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <a data-fslightbox="gallery" href="{% static 'static/photos/finances-us-dollars-and-bitcoins-currency-money-3.jpg' %}">
                  <!-- Photo -->
                  <div class="img-responsive img-responsive-4x1 rounded-3 border" style="background-image: url({% static 'static/photos/finances-us-dollars-and-bitcoins-currency-money-3.jpg' %})"></div>
                </a>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="row g-2 g-md-3">
              <div class="col-6">
                <div class="row g-2 g-md-3">
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/elegant-home-office-with-golden-accessories.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/elegant-home-office-with-golden-accessories.jpg' %})"></div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/stylish-workplace-with-computer-at-home.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/stylish-workplace-with-computer-at-home.jpg' %})"></div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/group-of-people-sightseeing-in-the-city.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/group-of-people-sightseeing-in-the-city.jpg' %})"></div>
                    </a>
                  </div>
                  <div class="col-6">
                    <a data-fslightbox="gallery" href="{% static 'static/photos/color-palette-guide-sample-colors-catalog-.jpg' %}">
                      <!-- Photo -->
                      <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/color-palette-guide-sample-colors-catalog-.jpg' %})"></div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-6">
                <a data-fslightbox="gallery" href="{% static 'static/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg' %}">
                  <!-- Photo -->
                  <div class="img-responsive img-responsive-1x1 rounded-3 border" style="background-image: url({% static 'static/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg' %})"></div>
                </a>
              </div>
              <div class="col-12">
                <a data-fslightbox="gallery" href="{% static 'static/photos/contemporary-black-and-white-home-decor.jpg' %}">
                  <!-- Photo -->
                  <div class="img-responsive img-responsive-4x1 rounded-3 border" style="background-image: url({% static 'static/photos/contemporary-black-and-white-home-decor.jpg' %})"></div>
                </a>
              </div>
              <div class="col-12">
                <a data-fslightbox="gallery" href="{% static 'static/photos/pink-desk-in-the-home-office.jpg' %}">
                  <!-- Photo -->
                  <div class="img-responsive img-responsive-3x1 rounded-3 border" style="background-image: url({% static 'static/photos/pink-desk-in-the-home-office.jpg' %})"></div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% include 'includes/footer.html' %}
  </div>
  
{% endblock content %}

{% block extrajs %}
  <!-- Libs JS -->
  <script src="{% static 'dist/libs/fslightbox/index.js' %}?1684106062" defer></script>
{% endblock extrajs %}